<template>
  <div class="main">
    <div class="back">
      <el-button type="primary" icon="el-icon-back" circle></el-button>
    </div>

    <myHeader />
    <div class="choice_problem_content">
      <div class="previous_page">
        <el-button icon="el-icon-back" circle></el-button>
      </div>
      <div class="choice_problem_content_show">
        <div class="choice_problem_content_problem_show">
          <div class="choice_problem_content_problem_show_list">
            {{ choiceProblems[0].problemName }}
          </div>
          <div class="choice_problem_content_problem_show_content">
            {{choiceProblems[0].title}}
          </div>
        </div>
        <div class="choice_problem_content_show_answers">
          <el-radio v-for="item in isMedicareList" :key="item.Id" :label=item.Id>{{item.Title}}. {{item.Name}}
          </el-radio>
        </div>
        <div class="submit_show">
          <el-button size="medium" type="primary">提交</el-button>
        </div>
      </div>
      <div class="next_page">
        <el-button icon="el-icon-arrow-right" circle></el-button>
      </div>
    </div>
    <div class="choice_problem_list">
      <div class="choice_problem_list_show">
        <div class="choice_problem_list_id" v-for="id in choiceProblems" v-bind:id="id" v-bind:key="id.id">
          {{ id.id }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import answer from "@/components/answer.vue";

  export default {
    components: {
      answer,
    },
    data() {
      return {
        isMedicare: '',
        isMedicareList: [],
        choiceProblemTitle: "test00",
        answers: [
          {
            title: "A",
            content: "123",
          },
          {
            title: "B",
            content: "456",
          },
          {
            title: "C",
            content: "456",
          },
          {
            title: "D",
            content: "456",
          },
        ],
        choiceProblems: [
          {
            id: 1,
            problemName: "test0",
            title: "123",
          },
        ],
      };
    },
    mounted() {
      var that = this
      let routerParams = this.$route.query.data;
      routerParams = this.qs.parse(routerParams);
      this.$axios({
        method: "GET",
        url: "http://81.70.192.34:8088/problem/searchChoice?problem_id=" + routerParams.problemId,
      }).then(res => {
        var list = res.data.data
        that.choiceProblems = list
        var answersList = list[0].answers
        for (let i = 0; i < answersList.length; i++) {
          var Title = null;
          switch (answersList[i].id) {
            case 1:
              Title = 'A'
              break
            case 2:
              Title = 'B'
              break
            case 3:
              Title = 'C'
              break
            case 4:
              Title = 'D'
              break
          }
          that.isMedicareList.push(
            {
              Id: answersList[i].id,
              Title: Title,
              Name: answersList[i].answerContent,

            }
          )
        }
        console.log(that.isMedicareList)
        console.log(this.user)
      }).catch((error) => {
        console.error(error);
      });
      console.log(routerParams);

    },
  };
</script>

<style scoped>
  .main {
    height: 90vh;
    width: 97vw;
    margin-top: 3vh;
    margin-left: 1vw;
    display: flex;
    flex-wrap: wrap;
  }

  .choice_problem_content {
    margin-top: 1vh;
    margin-left: 1vw;
    height: 85vh;
    width: 68vw;
    display: flex;
    flex-wrap: wrap;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }

  .previous_page {
    margin-left: 1vw;
    height: 75vh;
    width: 3vw;
    line-height: 75vh;
  }

  .next_page {
    height: 75vh;
    width: 3vw;
    line-height: 75vh;
  }

  .choice_problem_list {
    margin-top: 1vh;
    height: 85vh;
    width: 20vw;
    margin-left: 3vw;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }

  .choice_problem_content_problem_show {
    height: 50vh;
    width: 60vw;
    margin-top: 5vh;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }

  .choice_problem_content_problem_show_list {
    font-size: 30px;
    text-align: center;
    line-height: 10vh;
    height: 10vh;
    border-bottom: 1px solid #e6e6e6;
  }

  .choice_problem_content_show_answers {
    height: 12vh;
    width: 60vw;
    margin-top: 5vh;
    display: flex;
    flex-wrap: wrap;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }

  .choice_problem_list_id {
    height: 4vh;
    width: 2vw;
    line-height: 4vh;
    margin-top: 2vh;
    margin-left: 1vw;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    text-align: center;
  }

  .choice_problem_list_show {
    height: 65vh;
    width: 20vw;
    display: flex;
    flex-wrap: wrap;
  }

  .submit_show {
    height: 20vh;
    width: 20vw;
    line-height: 20vh;
    text-align: center;
    margin-left: 20vw;
  }

  .back {
    margin-top: 1vh;
    margin-left: 1vw;
  }
</style>